<template>
  <div class="home-page">
    <el-container>
      <div class="head-box">
        <el-header height="5em">
          <el-col :span="3">
            <!--<img class="img-body" src="../../../static/images/defaultHeadImage.jpg"/>-->
            <div class="img-body">
              <Avatar src="../../../static/images/defaultHeadImage.jpg"/>
            </div>
          </el-col>

          <el-col :span="18" class="search">
            <!--<el-input placeholder="搜索您想要的商品" prefix-icon="el-icon-search"></el-input>-->
            <van-search placeholder="请输入搜索关键词" background="none"/>
          </el-col>
          <el-col :span="3" class=" scan">
            <van-icon name="qr" class="img" size="2em"/>
          </el-col>

        </el-header>
      </div>
      <div class="main-box">
        <!-- closeable 模式，在右侧显示关闭按钮 -->
        <!--<van-notice-bar mode="closeable">-->
        <!--足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。-->
        <!--</van-notice-bar>-->
        <el-main>
          <el-row>
            <el-col class="card-box" :span="8" v-for="goods in goodsList" :key="goods.goodsId">
              <el-card :body-style="{ padding: '0' }">
                <img src="../../../static/images/renleijianshi.jpg" class="image">
                <div class="goods-description">
                  <span>{{goods.goodsName}}</span>
                  <div class="bottom clearfix">
                    <time class="time">{{ goods.supSalesVolume }}人付款</time>
                    <el-button type="text" class="button">...</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </div>

    </el-container>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        currentDate: new Date().getFullYear(),
        active: 0,
        dataListLoading: true,
        goodsList: [],
        pageNo: 1,
        pageSize: 15
      };
    },
    methods: {
      getRecommendGoods() {
        let url = 'goods-api/listRecommendGoods?page=' + this.pageNo + '&limit=' + this.pageSize
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'get',
        }).then((result) => {
          if (result && result.code === 0) {
            this.goodsList = this.goodsList.concat(result.data)
          } else {
            this.$message.error(result.msg);
          }
        })
      }
    },
    created: function () {
      let self = this
      self.getRecommendGoods()
      // 注册scroll事件并监听
      window.addEventListener('scroll', function () {
        // console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight); // 可视区域高度
        // console.log(document.body.scrollTop); // 滚动高度
        // console.log(document.body.offsetHeight); // 文档高度
        // 判断是否滚动到底部
        if (document.body.scrollTop + window.innerHeight >= document.body.offsetHeight) {
          self.pageNo++
          self.getRecommendGoods()
        }
      });

    }
  }
</script>

<style lang="less">
  @import "../../assets/less/index";
</style>
